<!DOCTYPE html>
<html lang="zh"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="/css/login.css">
    <style>
        .layui-layer-move{
            display: none;
        }
        #captcha1 {
            margin-top: 20px;
            border-radius: 10px;
        }
    </style>
</head>
<body>
<div id="login">
    <div id="logo"><img src="/images/demoLogo.png"></div>
    <div id="title">
        <div class="lo"><img src="/images/lo.png"></div>
        <div class="tit">登录之后探索最新科技</div>
    </div>
    <form autocomplete="off" method="post" action="/users/login" class="loginForm">
        <div class="register_item">
            <span>用户名</span>
            <input id="username" name="username" placeholder="请输入用户名"/><br/>
        </div>
        <div class="register_item"><span>密&nbsp&nbsp&nbsp&nbsp码</span><input type="password" id="password" name="password" placeholder="请输入密码"/><br/></div>
        <div id="captcha1">
            <p id="wait1" class="show">正在加载验证码......</p>
        </div>
        <div class="register_item_b"><button type="submit" id="submit">登录</button></div>

    </form>
</div>
<canvas height="926" width="1920" style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 0.5;" id="c_n1"></canvas>
<script src="/js/jquery-1.12.4.js"></script>
<script src="/js/zhihu.js"></script>
<script src="/popBox/layer.js"></script>
<script src="/js/gt.js"></script>
<script src="/popBox/layer.js"></script>
<script>



</script>
<script th:inline="javascript">
    $(function () {
        var $username = $("#username");
        var $password = $("#password");

        $username.focus(function () {
            if($username.parent().hasClass("error")){
                $username.parent().removeClass("error");
            }
            $username.parent().addClass("active");
        });
        $username.blur(function () {
            if($username.parent().hasClass("active")){
                $username.parent().removeClass("active");
            }
        });
        $password.focus(function () {
            if($password.parent().hasClass("error")){
                $password.parent().removeClass("error");
            }
            $password.parent().addClass("active");
        });
        $password.blur(function () {
            if($password.parent().hasClass("active")){
                $password.parent().removeClass("active");
            }
        });
        var handler = function (captchaObj) {
            $("#submit").click(function (e) {
                if($username.val() == ""){
                    $username.parent().addClass("error");
                    yaoyao($("#login"));
                    return false;
                }
                if($password.val() == ""){
                    $password.parent().addClass("error");
                    yaoyao($("#login"));
                    return false;
                }
                var result = captchaObj.getValidate();
                if (!result) {
                    layer.msg("~请滑动滑块~", {
                        time: 2000, //2s后自动关闭
                    },function () {
                        window.location.reload();
                    });
                    $("#notice1").show();
                    setTimeout(function () {
                        $("#notice1").hide();
                    }, 2000);
                    e.preventDefault();
                    yaoyao($("#login"));
                    return false;
                }
                // 二次验证
                console.log($(".geetest_form [name='geetest_challenge']").val());
                $.ajax({
                    url: "/verifyLogin",
                    type: "post",
                    dataType: "json",
                    async:false,
                    data:{
                        geetest_challenge: $(".geetest_form [name='geetest_challenge']").val(),
                        geetest_validate: $(".geetest_form [name='geetest_validate']").val(),
                        geetest_seccode: $(".geetest_form [name='geetest_seccode']").val()
                    },
                    success: function (data) {
                        if(data != "yes"){
                            layer.msg("滑块验证失败", {
                                time: 2000, //2s后自动关闭
                            });
                            yaoyao($("#login"));
                            return false;
                        }
                    }

                });
            });
            // 将验证码加到id为captcha的元素里，同时会有三个input的值用于表单提交
            captchaObj.appendTo("#captcha1");
            captchaObj.onReady(function () {
                $("#wait1").hide();
            });
        };
        $.ajax({
            url: "/startCaptcha?t=" + (new Date()).getTime(), // 加随机数防止缓存
            type: "get",
            dataType: "json",
            success: function (data) {
                // 调用 initGeetest 初始化参数
                // 参数1：配置参数
                // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它调用相应的接口
                initGeetest({
                    gt: data.gt,
                    challenge: data.challenge,
                    new_captcha: data.new_captcha, // 用于宕机时表示是新验证码的宕机
                    offline: !data.success, // 表示用户后台检测极验服务器是否宕机，一般不需要关注
                    product: "float", // 产品形式，包括：float，popup
                    width: "100%"
                }, handler);
            }
        });


        // 提示
        var msg = /*[[${msg}]]*/ null;
        if( msg != null){
            layer.msg(msg, {
                time: 2000, //2s后自动关闭
            });
        }
    });
    function yaoyao($div) {
        $($div).stop(true,true).animate({left:"48%"},200).animate({left:"53%"},200).animate({left:"50%"},200);
    }
</script>
</body>
</html>